{% extends "base.html" %}

{% block title %}设置 - 专注时钟{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/settings.css') }}">
{% endblock %}

{% block content %}
<div class="settings-container">
    <div class="settings-header">
        <h2>设置</h2>
    </div>
    
    <div class="settings-content">
        <div class="settings-sidebar">
            <div class="settings-nav">
                <button class="nav-item active" data-section="time-settings">时间设置</button>
                <button class="nav-item" data-section="notification-settings">通知设置</button>
                <button class="nav-item" data-section="theme-settings">主题设置</button>
                <button class="nav-item" data-section="data-management">数据管理</button>
            </div>
        </div>
        
        <div class="settings-main">
            <!-- 时间设置部分 -->
            <section id="time-settings" class="settings-section active">
                <h3>时间设置</h3>
                <div class="settings-form">
                    <div class="form-group">
                        <label for="focus-duration">专注时长（分钟）</label>
                        <div class="slider-container">
                            <input type="range" id="focus-duration" min="1" max="90" step="1" value="25">
                            <span class="slider-value" id="focus-duration-value">25</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="short-break-duration">短休息时长（分钟）</label>
                        <div class="slider-container">
                            <input type="range" id="short-break-duration" min="1" max="30" step="1" value="5">
                            <span class="slider-value" id="short-break-duration-value">5</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="long-break-duration">长休息时长（分钟）</label>
                        <div class="slider-container">
                            <input type="range" id="long-break-duration" min="5" max="60" step="1" value="15">
                            <span class="slider-value" id="long-break-duration-value">15</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="long-break-interval">长休息间隔（专注次数）</label>
                        <div class="slider-container">
                            <input type="range" id="long-break-interval" min="1" max="10" step="1" value="4">
                            <span class="slider-value" id="long-break-interval-value">4</span>
                        </div>
                    </div>
                    
                    <div class="form-group checkbox-group">
                        <div class="checkbox-wrapper">
                            <input type="checkbox" id="auto-start-break" checked>
                            <label for="auto-start-break">自动开始休息</label>
                        </div>
                    </div>
                    
                    <div class="form-group checkbox-group">
                        <div class="checkbox-wrapper">
                            <input type="checkbox" id="auto-start-focus">
                            <label for="auto-start-focus">自动开始下一个专注</label>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 通知设置部分 -->
            <section id="notification-settings" class="settings-section">
                <h3>通知设置</h3>
                <div class="settings-form">
                    <div class="form-group checkbox-group">
                        <div class="checkbox-wrapper">
                            <input type="checkbox" id="enable-notification" checked>
                            <label for="enable-notification">启用通知</label>
                        </div>
                    </div>
                    
                    <div class="form-group checkbox-group">
                        <div class="checkbox-wrapper">
                            <input type="checkbox" id="enable-sound" checked>
                            <label for="enable-sound">播放提示音</label>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="sound-volume">提示音音量</label>
                        <div class="slider-container">
                            <input type="range" id="sound-volume" min="0" max="100" step="1" value="80">
                            <span class="slider-value" id="sound-volume-value">80%</span>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="notification-type">通知类型</label>
                        <select id="notification-type">
                            <option value="simple">简单通知</option>
                            <option value="detailed" selected>详细通知</option>
                        </select>
                    </div>
                </div>
            </section>
            
            <!-- 主题设置部分 -->
            <section id="theme-settings" class="settings-section">
                <h3>主题设置</h3>
                <div class="settings-form">
                    <div class="form-group radio-group">
                        <label class="group-label">显示模式</label>
                        <div class="radio-options">
                            <div class="radio-wrapper">
                                <input type="radio" id="theme-light" name="theme-mode" value="light" checked>
                                <label for="theme-light">浅色模式</label>
                            </div>
                            <div class="radio-wrapper">
                                <input type="radio" id="theme-dark" name="theme-mode" value="dark">
                                <label for="theme-dark">深色模式</label>
                            </div>
                            <div class="radio-wrapper">
                                <input type="radio" id="theme-auto" name="theme-mode" value="auto">
                                <label for="theme-auto">自动（跟随系统）</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="group-label">主题颜色</label>
                        <div class="color-picker">
                            <div class="color-option active" data-color="blue" style="background-color: #4a6ee0;"></div>
                            <div class="color-option" data-color="green" style="background-color: #28c76f;"></div>
                            <div class="color-option" data-color="purple" style="background-color: #7367f0;"></div>
                            <div class="color-option" data-color="orange" style="background-color: #ff9f43;"></div>
                            <div class="color-option" data-color="red" style="background-color: #ea5455;"></div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 数据管理部分 -->
            <section id="data-management" class="settings-section">
                <h3>数据管理</h3>
                <div class="settings-form">
                    <div class="form-group">
                        <label>数据导出</label>
                        <button id="export-data" class="btn btn-primary">导出数据</button>
                        <p class="form-help">将您的所有数据导出为JSON文件用于备份。</p>
                    </div>
                    
                    <div class="form-group">
                        <label>数据导入</label>
                        <div class="file-upload">
                            <input type="file" id="import-data" accept=".json">
                            <label for="import-data" class="btn btn-secondary">选择文件</label>
                        </div>
                        <p class="form-help">从备份文件恢复您的数据。</p>
                    </div>
                    
                    <div class="form-group danger-zone">
                        <label>危险区域</label>
                        <button id="clear-sessions" class="btn btn-danger">清除专注记录</button>
                        <p class="form-help">此操作将删除所有专注会话记录，但保留目标数据。</p>
                        
                        <button id="clear-all-data" class="btn btn-danger">清除所有数据</button>
                        <p class="form-help">此操作将删除所有数据，包括专注记录、目标和设置。此操作不可撤销！</p>
                    </div>
                </div>
            </section>
        </div>
    </div>
    
    <div class="settings-footer">
        <button id="save-settings" class="btn btn-primary">保存设置</button>
        <button id="reset-settings" class="btn btn-secondary">重置为默认</button>
    </div>
</div>

<!-- 确认对话框 -->
<div id="confirm-dialog" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="confirm-title">确认操作</h3>
            <button class="close-modal">&times;</button>
        </div>
        <div class="modal-body">
            <p id="confirm-message">您确定要执行此操作吗？</p>
        </div>
        <div class="modal-footer">
            <button id="confirm-ok" class="btn btn-danger">确定</button>
            <button class="btn btn-secondary close-modal">取消</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/settings.js') }}"></script>
{% endblock %} 